<template>
  <div class="main">
    <table class="table">
      <tr>
        <th class="label">任务类型</th>
        <td class="value val-flex">
          <div>
            <span>{{ detailsData.taskTypeName || '' }}</span>
            <span v-if="detailsData.taskClassify">{{ ' - ' + detailsData.taskClassify }}</span>
          </div>
        </td>
      </tr>
      <tr>
        <th class="label">任务内容</th>
        <td class="value">{{ detailsData.dataContent || '' }}</td>
      </tr>
      <tr>
        <th class="label">反馈周期</th>
        <td class="value">{{ detailsData.feedBackCycleDesc || '' }}</td>
      </tr>
      <tr>
        <th class="label">完成时限</th>
        <td class="value val-flex">
          <span>{{ detailsData.completeTime || '' }}</span>
          <span v-if="pageBtns.includes('TASK_CHANGE_COMPLETETIME')" class="change-time" @click="onChangeDate">
            调整日期
            <van-icon name="arrow" />
          </span>
        </td>
      </tr>
      <tr>
        <th class="label">牵头人</th>
        <td class="value">
          <div class="orgList" v-if="detailsData.hostOrgName && detailsData.hostOrgName.length">
            <p v-for="(item, index) in detailsData.hostOrgName" :key="item.obj">
              <span v-if="item.relObjInstru" :class="{ underLine: item.relObjInstru }" @click="onShowInstru(item)">
                {{ item.orgName }}
              </span>
              <span v-else>
                {{ item.orgName }}
              </span>

              <template v-if="index !== detailsData.hostOrgName.length - 1">、</template>
            </p>
          </div>
        </td>
      </tr>
      <tr>
        <th class="label">协同人</th>
        <td class="value">
          <div class="orgList" v-if="detailsData.coSponsorOrgName && detailsData.coSponsorOrgName.length">
            <p v-for="(item, index) in detailsData.coSponsorOrgName" :key="item.obj">
              <span v-if="item.relObjInstru" :class="{ underLine: item.relObjInstru }" @click="onShowInstru(item)">
                {{ item.orgName }}
              </span>
              <span v-else>
                {{ item.orgName }}
              </span>
              <template v-if="index !== detailsData.coSponsorOrgName.length - 1">、</template>
            </p>
          </div>
        </td>
      </tr>
      <template v-if="detailsData.isAssessment === '1'">
        <tr>
          <th class="label">考核周期</th>
          <td class="value">{{ detailsData.assessmentCycle || '' }}</td>
        </tr>
        <tr>
          <th class="label">考核系数</th>
          <td class="value">{{ detailsData.assessmentCoefficient || '' }}</td>
        </tr>
        <tr>
          <th class="label">评价人</th>
          <td class="value">
            <div class="status">
              <p>{{ hostEvaluaChainStr || '' }}</p>
            </div>
          </td>
        </tr>
      </template>
      <tr v-if="detailsData.isAssessment === '0'">
        <th class="label">是否参与考核</th>
        <td class="value">否</td>
      </tr>
      <tr>
        <th class="label">任务来源</th>
        <td class="value">{{ detailsData.taskSource || '' }}</td>
      </tr>
      <tr>
        <th class="label">任务状态</th>
        <td class="value val-flex">
          <div class="status">
            <p v-for="item in detailsData.taskStatusObj" :key="item.obj">
              <span>{{ item.objName }}：</span>
              <span class="status-val">{{ item.stateName || item.state }}</span>
            </p>
          </div>
          <van-button
            v-if="pageBtns.includes('TASK_MODIFY_STATE')"
            color="#136cc9"
            type="info"
            size="small"
            @click="onTaskStatusSet">
            状态设置
          </van-button>
        </td>
      </tr>
      <tr>
        <th class="label">附件</th>
        <td class="value">
          <ImgUpload
            v-if="detailsData.fileShowVOList && detailsData.fileShowVOList.length > 0"
            :albumList="detailsData.fileShowVOList"
            :entry="false" />
        </td>
      </tr>
      <tr>
        <th class="label">创建时间</th>
        <td class="value">
          {{ detailsData.createTime || '' }}
        </td>
      </tr>
      <tr>
        <th class="label">创建人</th>
        <td class="value">
          {{ detailsData.createByName }}
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import ImgUpload from '@com/ImgUpload'

export default {
  name: 'TaskDetailsCom',
  components: { ImgUpload },
  props: {
    // 详情
    detailsData: {
      type: Object,
      default: () => {},
    },
    // 按钮
    pageBtns: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      hostEvaluaChainStr: '',
      coSponsorEvaluaChainStr: '',
    }
  },
  computed: {
    showPopover() {
      return data => {
        return false
      }
    },
  },
  watch: {
    detailsData: {
      handler(newVal) {
        /* 评价链数据处理 */
        if (newVal.hostEvaluaChain) {
          this.hostEvaluaChainStr = newVal.hostEvaluaChain
            .map(item => item.userName)
            .filter(item => item)
            .join(' + ')
        }
        if (newVal.coSponsorEvaluaChain) {
          this.coSponsorEvaluaChainStr = newVal.coSponsorEvaluaChain
            .map(item => item.userName)
            .filter(item => item)
            .join(' + ')
        }
      },
      immediate: true,
      deep: true,
    },
  },
  methods: {
    /* 调整完成时限 */
    onChangeDate() {
      this.$emit('changeDate')
    },
    /* 任务状态设置 */
    onTaskStatusSet() {
      this.$emit('taskStatusSet')
    },
    /* 展示主办单位和协办单位的事项说明 */
    onShowInstru(item) {
      const { relObjInstru = '', orgName = '' } = item
      this.$dialog
        .alert({
          title: `【${orgName}】事项说明`,
          message: `${relObjInstru}`,
          messageAlign: 'left',
        })
        .then(() => {
          // on close
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.main {
  background: #fff;
  padding: px2rem(20) px2rem(10);
}
.table {
  width: 100%;
  table-layout: fixed;
  tr {
    border: 1px solid #eee;
  }
  td {
    border-left: 1px solid #eee;
  }
  .label {
    width: 20%;
    font-size: $fontSize30;
    color: #333;
    font-weight: 500;
    padding: px2rem(20) 0;
    position: relative;
    // background: #f6faff;
    background: #f7f7f7;
  }
  .value {
    font-size: $fontSize30;
    color: #606266;
    padding: px2rem(20);
    text-align: justify;
    &.val-flex {
      display: flex;
      justify-content: space-between;
      .change-time {
        font-size: $fontSize28;
        color: #136cc9;
      }
    }
  }
}
.orgList {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  p {
    line-height: px2rem(55);
    .blueColor {
      color: #136cc9;
    }
    .underLine {
      border-bottom: 1px solid #136cc9;
      // color: #136cc9;
      cursor: pointer;
    }
  }
}
.status {
  // display: flex;
  // justify-content: space-between;
  // align-items: center;
  // flex-wrap: wrap;
  p {
    margin-right: px2rem(20);
    line-height: px2rem(55);
    .status-val {
      color: #136cc9;
    }
  }
}
</style>
<style lang="scss">
.popover-con {
  width: 500px;
  padding: px2rem(20) !important;
  font-size: $fontSize32;
}
</style>
